<template>
	<div class="role-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-form-item label="商品名称：" class="el_form_item">
				<el-input v-model="queryFrom.name" placeholder="请输入商品名称"></el-input>
			</el-form-item>

			<el-form-item label="类目：" class="el_form_item" style="margin-left: 20px">
				<el-select v-model="queryFrom.categoryId" placeholder="请选择类目">
					<el-option :label="item.categoryName" :value="item.id" v-for="(item, index) in categorys" :key="index"></el-option>
				</el-select>
			</el-form-item>

			<el-button type="primary" @click="getData">查询</el-button>
			<el-button type="primary" @click="restData" plain>重置</el-button>
			<el-button type="success" @click="openAddRole">添加商品</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData" class="table" @currentChange="currentChange" @cellClick="cellClick">
			<el-table-column prop="name" label="商品名称" align="center" min-width="300" />
			<el-table-column prop="categoryId" label="商品类目" align="center" min-width="100">
				<template v-slot="scope"> {{ makeCateName(scope.row.categoryId) }}</template>
			</el-table-column>

			<el-table-column label="权重" prop="weight" align="center" min-width="100">
				<template v-slot="scope">
					<el-input
						type="number"
						@blur="changeWeight(scope.row)"
						@keyup.enter.native="changeWeight(scope.row)"
						v-show="scope.row.editorWeight"
						:pattern="/^[0-9]*$/"
						v-model.number="scope.row.weight"
					/>
					<span v-show="!scope.row.editorWeight">{{ scope.row.weight }}</span>
				</template>
			</el-table-column>

			<!-- <el-table-column label="现价" prop="presentPrice" align="center" min-width="120">
				<template v-slot="scope">
					<el-input
						type="number"
						@blur="changeWeight(scope.row)"
						@keyup.enter.native="changeWeight(scope.row)"
						v-show="scope.row.editorPrice"
						:pattern="/^[0-9]*$/"
						v-model.number="scope.row.presentPrice"
					/>
					<span v-show="!scope.row.editorPrice">{{ scope.row.presentPrice }}</span>
				</template>
			</el-table-column> -->

			<el-table-column prop="status" label="状态" align="center" min-width="120">
				<template v-slot="scope">
					<el-tag type="primary" v-if="scope.row.status == 1">待上架</el-tag>
					<el-tag type="success" v-if="scope.row.status == 2">上架中</el-tag>
					<el-tag type="info" v-if="scope.row.status == 3">已下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="indexStatus" label="首页推荐" align="center" min-width="100">
				<template v-slot="scope">
					<el-tag type="danger" v-if="scope.row.indexStatus == 0">否</el-tag>
					<el-tag type="success" v-if="scope.row.indexStatus == 1">是</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sales" label="销量" align="center" />
			<!-- <el-table-column prop="mainImage" label="主轮播图" align="center" /> -->
			<!-- <el-table-column prop="infoImage" label="详情图" align="center" /> -->
			<!-- <el-table-column prop="pointSwitch" label="是否允许积分抵扣" align="center" /> -->
			<!-- <el-table-column prop="pointValue" label="积分抵扣金额" align="center" /> -->
			<!-- <el-table-column prop="ruleSwitch" label="规则说明是否展示" align="center" /> -->
			<!-- <el-table-column prop="presentPrice" label="最小sku现价" align="center" />
			<el-table-column prop="originalPrice" label="最小sku原价" align="center" />
			<el-table-column prop="skuPointValue" label="最小skupoint" align="center" /> -->
			<el-table-column prop="createBy" label="创建者" align="center" min-width="150" />
			<el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
			<el-table-column label="操作" align="center" fixed="right" width="200">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
					<el-button type="text" v-if="scope.row.status == 1 || scope.row.status == 3" @click="enble(scope.row, 2)">上架</el-button>
					<el-button type="text" v-if="scope.row.status == 2" @click="enble(scope.row, 3)">下架</el-button>
					<el-button type="text" @click="changeGoodsIndex(scope.row)">{{ scope.row.indexStatus === 0 ? '首页推荐' : '取消首页推荐' }}</el-button>
				</template>
			</el-table-column>
		</table-components>

		<add :isAdd="isAdd" :dialogVisible="addVisible" :row="clickItem" @handleClose="addRoleClose"></add>
		<selectLabel :dialogVisible="labelVisible" @handleClose="addRoleClose"></selectLabel>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getGoodsList, changeGoodsStatus, goodsSetIndex, getCategory } from '/@/api/api';
import add from './dialog/add.vue';
import selectLabel from './dialog/selectLabel.vue';
import { editWeight } from '/@/api/api';

const labelList = ref([]);
const labelVisible = ref(false);
const isAdd = ref(false);
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(false);
const queryFrom = ref({
	// name: '',
	// categoryId: 0
});
const addVisible = ref(false);
const clickItem = ref({});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
	getCategoryFn();
});

function restData() {
	for (let key in queryFrom.value) {
		delete queryFrom.value[key];
	}

	tableData.page = 1;
	getData();
}

async function getData() {
	tableLoading.value = false;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getGoodsList(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;

		// getLabelFn(data);
	}
}

function openAddRole(item) {
	isAdd.value = true;
	clickItem.value = item;
	addVisible.value = true;
}

function addRoleClose() {
	isAdd.value = true;
	addVisible.value = false;
	getData();
}

async function openEdit(item: any) {
	isAdd.value = false;
	clickItem.value = item;
	addVisible.value = true;

	// // getGoodsInfo
	// const { code, data } = await getGoodsInfo({ id: item.id })
	// if (code === 200) {
	// 	isAdd.value = false;
	// 	clickItem.value = data.info;
	// 	addVisible.value = true;
	// }
}

// 上/下架
async function enble(item: any, status: number) {
	tableLoading.value = true;
	let par = {
		id: item.id,
		status: status,
	};
	// console.log(par);
	let { code } = await changeGoodsStatus(par);
	tableLoading.value = false;
	if (code == 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

// 首页推荐
async function changeGoodsIndex(item) {
	const { id, indexStatus } = item;
	let par = { id, indexStatus: Number(!indexStatus) };
	// console.log('par', par);
	let { code } = await goodsSetIndex(par);
	if (code === 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

function currentChange(page) {
	tableData.page = page;
	getData();
}
const categorys = ref([]);
// 获取商品分类
async function getCategoryFn() {
	const { code, data } = await getCategory({
		page: 1,
		size: 9999,
		parentId: 0,
	});
	if (code === 200) {
		categorys.value = data.list;
	}
}

function makeCateName(id) {
	let name = '';
	categorys.value.forEach((item, index) => {
		if (item.id == id) {
			name = item.categoryName;
		}
	});

	return name;
}

const clickWeight = ref();
// 单元格双击事件
function cellClick({ row, column, cell, event }) {
	clickWeight.value = row.weight;
	if (column.property == 'weight') {
		row.editorWeight = true;
	} else if (column.property == 'presentPrice') {
		row.editorPrice = true;
	}

	if (column.property == 'weight' || column.property == 'presentPrice') {
		let cellInput = cell.children[0].children[0].children[0].children[0];
		nextTick(() => {
			//获取焦点
			setTimeout(() => {
				cellInput.focus();
			}, 100);
		});
	}
}

// 修改权重、价格
async function changeWeight(row) {
	row.editorWeight = false;
	row.editorPrice = false;

	if (clickWeight.value == row.weight) {
		return;
	}
	if (row.weight < 0) {
		ElMessage.error('权重必须大于0');
		getData();
	}

	let par = {
		id: row.id,
		weight: row.weight,
	};
	const { code } = await editWeight(par);
	if (code === 200) {
		ElMessage.success('操作成功');
	}
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.role-container {
	padding: 0 20px 20px 20px;
}

.table button {
	padding: 0;
}

.table {
	:deep(.el-table--large .cell) {
		padding: 0;
	}
}
</style>
